<docs>
</docs>
<template>
  <div
    :class="`weui-cell weui-cell_access ${valid === status.REJECTED ? 'weui-cell_warn' : ''}`"
    @click="initPicker"
  >
    <div class="weui-cell__hd">
      <p class="weui-label">{{label}}</p>
    </div>
    <div class="weui-cell__ft text">{{dateTxt || labelName}}</div>
    <upload-pic
      :hasInitEvent.sync="hasInitEvent"
      ref="uploadPic"
      :imageSrc="dateImg"
      :cliName="dataName"
      @update:imageSrc="dateImgT"
      @update:cliName="dataNameT"
      @update:labelName="updateLabelName"
    ></upload-pic>
  </div>
</template>
<script>
import uploadPic from "base/form/upload/uploadPic";
import { mixinValid } from "common/mixins/mixins";

export default {
  name: "upload",
  components: { uploadPic },
  props: {
    dataName: String,
    dateImg: String,
    label: String,
    dateTxt: String
  },
  mixins: [mixinValid],
  data() {
    return {
      hasInitEvent: false,
      labelName: ''
    };
  },
  methods: {
    dateImgT(val) {
      this.$emit("update:dateImg", val);
    },
    dataNameT(val) {
      this.labelName = val ? "已上传" : "未上传";
      this.$emit("update:dataName", val);
    },
    updateLabelName(val) {
      this.labelName = val;
    },
    initPicker() {
      this.hasInitEvent = true;
    }
  },
  watch: {
    labelName(val) {
      if (this.labelName) {
        this.resetValid();
        this.$emit("input", val);
      }
    }
  }
};
</script>
<style scoped lang="scss">
@import "~common/scss/var.scss";
.weui-label {
  @include label;
}
.text {
  text-align: left;
  flex: 1 1 auto;
  line-height: 1.2;
  color: #000;
  font-size: inherit;
  @include input-text;
}
</style>
